<template>
	<view style="background: #ffffff; ;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		">
		<view class="notes">
			<p><span>*</span>设备信息</p>
		</view>
		<view class="uni-common-mt">
			<view class="uni-form-item uni-column user-input">
				<view style="width: 90px; height: 35px; font-size: 16px;">设备序列号: </view>
				<view class="input">
					<view style="font-size: 18px; color: #cacaca;">{{serialnumber}}</view>
				</view>
			</view>
			<!-- 项目名称   -->
			<view class="uni-form-item uni-column user-input">
				<view style="width: 90px; height: 35px; font-size: 16px;">项目名称:</view>
				<view class="input">
					<u--input placeholder="请输入项目名称" border="surround" v-model="projectname" type="text" clearable></u--input>
				</view>
			</view>
			<view class="uni-form-item uni-column user-input">
				<view style="width: 90px; height: 35px; font-size: 16px;">产品A码:</view>
				<view class="input">
					<u--input placeholder="请输入A码" border="surround" v-model="productacode" type="text" clearable></u--input>
				</view>
			</view>
			<u-gap height="5px" bgColor="#ffffff "></u-gap>
			<view class="uni-form-item uni-column user-input">
				<view class="title">产品名称:</view>
				<view class="input">
					<text v-if="!devicetype " @click="showProduct = true">请选择产品名称</text>
					<text v-else @click="showProduct = true">{{devicetype}}</text>
					<u-picker :show="showProduct" :columns="columnsProduct"  @confirm ='productConfirm' @cancel="showProduct = false" 
					@close='productClose' @change='productChange'></u-picker>
					
				</view>
			</view>
			<view class="uni-form-item uni-column user-input">
				<view class="title">产品型号:</view>
				<view class="input">
					<u--input placeholder="请输入型号" border="surround" v-model="devicemodel" type="text" clearable></u--input>
				</view>
			</view>
			<u-gap height="5px" bgColor="#ffffff "></u-gap>
			<view class="uni-form-item uni-column user-input">
				<view class="title">出厂日期:</view>
				<view class="input" > 
					<text v-if="!deliverytime" @click="show = true">请选择出厂日期</text>
					<text v-else @click="show = true">{{deliverytime}}</text>
					<u-datetime-picker :show="show" v-model="value1" mode="datetime" 
							@confirm="confirm"
							@cancel="cancel"
							@change="change"
							@close="close"
				></u-datetime-picker>
				</view>
			</view>
			<view class="uni-form-item uni-column user-input">
				<view style="width: 90px; font-size: 16px;">生产组别:</view>
				<view class="input" >
					<text v-if="!productiongroup" @click="showPeople = true">请选择生产组别</text>
					<text v-else @click="showPeople=true">{{productiongroup}}</text>
					<u-picker :show="showPeople" :columns="columns" closeOnClickOverlay @confirm ='peopleConfirm' 
					@cancel="showPeople = false " @close="showPeople = false " @change="peopleChange" ></u-picker>
				</view>
			</view>
			<!-- 技术 负责人 -->
			<u-gap height="5px" bgColor="#ffffff "></u-gap>
			<view class="uni-form-item uni-column user-input">
				<view style="width: 90px; font-size: 16px;">技术负责人:</view>
				<view class="input" >
					<text v-if="!productionleader" @click="showTD = true" style="width: 200px;">请选择技术负责人</text>
					<text v-else @click="showTD=true" style="width: 200px; ">{{productionleader}}</text>
					<u-picker :show="showTD" :columns="columnsTD" closeOnClickOverlay @confirm ='TDconfirm' 
					@cancel="showTD = false" @close="showTD=false" @change="TDchange" ></u-picker>
				</view>
			</view>
			<!--   业务员    -->
			<view class="notes">
				<p><span>*</span>业务员信息</p>
			</view>
			<view class="uni-form-item uni-column user-input">
				<view style="width: 90px; font-size: 16px;">跟单业务员:</view>
				<view class="input">
					<!-- <u--input placeholder="请输入跟单业务员" border="surround" v-model="salespersonname" type="text" clearable></u--input> -->
					<text v-if="!salespersonname" @click="showMerch = true" style="width: 200px;">请选择技术负责人</text>
					<text v-else @click="showMerch=true" style="width: 200px; ">{{salespersonname}}</text>
					<u-picker :show="showMerch" :columns="columnsMerch" closeOnClickOverlay @confirm ='Merchconfirm' 
					@cancel="showMerch = false" @close="showMerch=false" @change="Merchchange" ></u-picker>
				</view>
			</view>
			<!-- <view class="uni-form-item uni-column user-input">
				<view class="title">联系方式:</view>
				<view class="input">
					<u--input placeholder="请输入业务员联系方式" maxlength="11" border="surround" v-model="salespersonphone" type="number" clearable></u--input>
				</view>
			</view> -->
			<view class="notes">
				<p><span>*</span>甲方信息</p>
			</view>
			<view class="uni-form-item uni-column user-input">
				<view class="title">公司名称:</view>
				<view class="input">
					<u--input placeholder="请输入公司名称" border="surround" v-model="customername" type="text" clearable></u--input>
				</view>
			</view>
			<view class="uni-form-item uni-column user-input">
				<view style="width: 90px; font-size: 16px;">客户联系人:</view>
				<view class="input">
					<u--input placeholder="请输入客户联系人" border="surround" v-model="contacts" type="text" clearable></u--input>
				</view>
			</view>
			<view class="uni-form-item uni-column user-input">
				<view style="width: 70px; font-size: 16px;">客户电话:</view>
				<view class="input">
					<!-- <input class="uni-input" v-model="customerphone" type="number" maxlength="11" placeholder="请输入电话号码" /> -->
					<u--input placeholder="请输入电话号码" maxlength="11" border="surround" v-model="customerphone" type="number" clearable></u--input>
				</view>
			</view>
			<!-- <view class="uni-form-item uni-column user-input">
				<view style="width: 50px; font-size: 16px;">职位:</view>
				<view class="input">
					<u--input placeholder="请输入职位" border="surround" v-model="position" type="text" clearable></u--input>
				</view>
			</view> -->
			<view class="uni-form-item uni-column user-input">
				<view class="title">收货地址:</view>
				<view class="input">
					
					<u--textarea v-model="companyposition" placeholder="请输入收货地址" autoHeight class="uni-input"></u--textarea>
				</view>
			</view>
			<u-row customStyle="margin-bottom: 10px">
				<!-- <u-col span="2.5">
					<view style="font-size: 15px;">设备位置:</view>
				</u-col> -->
				<u-col span="9">
					<!-- <u--input placeholder="xx省xx市xx区" border="surround" v-model="addressName" clearable disabled></u--input> -->
					<u-collapse accordion >
						<u-collapse-item title="点击展开设备位置">
							<text slot="value" class="u-page__item__title__slot-title">查看更多</text>
							<text class="u-collapse-content">{{addressName}}</text>
						</u-collapse-item>
					</u-collapse>
					
					<!-- <u-read-more ref="uReadMore" showHeight="40">
							<u-parse :content="addressName" @load="load"></u-parse>
						</u-read-more> -->
				</u-col>
				<u-col span="3">
					<button @click="sweep" class="sweep-bt">
						<image src="../../static/location.png" style="width: 20px; height: 20px;"></image>
						<text style="font-size: 13px; padding-left: 3px;">定位</text>
					</button>
				</u-col>
			</u-row>
		</view>
		<button class="upload" @click="deviceEnterUpload" style="margin-top: 40px;">上报</button>
		<u-gap height="50px" bgColor="#ffffff "></u-gap>
	</view>
</template>

<script>
	import amap from '@/static/js/amap-wx.130.js';
	let scan;
	export default {
		data() {
			return {
				value:'',
				show: false,  //日期 选择
				value1: Number(new Date()),
				//  生产负责人 
				showPeople: false,
				columns: [],  // 组别
				
				//  产品名称 
				showProduct: false,
				columnsProduct: [
					['数控弯管机', '全自动小U弯管机', '手动小U弯管机','全自动长U弯管机','半自动长U弯管机','手动长U弯管机','开料机',
					'管端机','冲孔机','手动胀管机','立式胀管机','移动式胀管机','卧式胀管机','开式冲床 科斯顿主机','开式冲床 其他主机',
					'闭式冲床','开料管端弯管一体机','折弯机','套环机','配件','去毛刺机','打凹点机','清洗机 涂油机','卷圆机','剪角机',
					'环焊机','穿花机','非标新机'
					]
				],
				// 技术 负责人
				showTD: false,
				columnsTD: [], // 生产负责人
				// yewuyuan   
				showMerch: false,
				columnsMerch: [],
				
				devicetype: '',   //产品名称 
				serialnumber:'', //扫码的内容  序列号 
				devicemodel:'', //设备型号
				deliverytime: '',  //出厂时间
				productiongroup: '',   //生产 组别 
				salespersonname: '',   //业务员
				productionleader: '',   // 技术负责人 
				// salespersonphone: '',   // 业务员联系电话
				customername: '',  //客户名称（公司名称）
				contacts: '',    //客户联系人 
				customerphone: '',   // 客户电话 
				companyposition: '',   //公司地址
				projectname: '',       // 项目名称 
				// location: '',     //  设备位置
				productacode: '',  //  A  码
				// position: ''       //职位
				
				gdKeys:'a65ca3f7e4c4cf0f17d64768ce74a85e',
				addressName:'',
				lng:'',
				lat:''   ,// 纬度 
				
				addressList:{},
				
			};
		},
		onLoad(option) {
			scan =  JSON.parse(decodeURIComponent(option.data))
			this.serialnumber = scan.scan;
			//  生产组别   技术负责人   业务员 
			let columnsList = [];
			let columnsTDList = [];
			let columnsMerchList = [];
			uni.request({
				url: 'https://www.smacaftersales.com:443/information/information/getBindDeviceInfo',
				method: 'GET',
				header: {
					"Content-Type": "application/json" //请求头信息
				},
				success: (res) => {
					console.log(res,' 生产组别   技术负责人   业务员 下拉框内容 ')
					for (var i = 0; i < res.data.data.sysDeptList.length; i++) {   //  生产组别  
						columnsList.push(res.data.data.sysDeptList[i].deptName)   
					}
					//  技术 负责人 
					for (var i = 0; i < res.data.data.sysUserList.length; i++) {
						columnsTDList.push(res.data.data.sysUserList[i].nickName) 
					}
					//  业务员  
					for (var i = 0; i < res.data.data.sysUsersByBusinessList.length; i++) {
						columnsMerchList.push(res.data.data.sysUsersByBusinessList[i].nickName)	
					}	
				}
			})
			this.columns.push(columnsList)
			this.columnsTD.push(columnsTDList)
			this.columnsMerch.push(columnsMerchList)
			
			//   位置获取  
			const _this = this;
			this.amapPlugin = new amap.AMapWX({
			    key: this.gdKeys
			});
			
			uni.showLoading({
				title: '获取信息中'
			});
			_this.amapPlugin.getRegeo({
				success: (data) => {
					// console.log('------定位数据 -------',data[0].regeocodeData.formatted_address);
					// console.log('------纬度------',data[0].latitude,'**********  经度 ********',data[0].longitude)
					// _this.addressName = data[0].regeocodeData.formatted_address;
					_this.lng = data[0].longitude;
					_this.lat = data[0].latitude;
					uni.hideLoading();
				},
				fail: (err) => {
					// console.log(err)
					 uni.hideLoading();
				}
			});
			
			uni.removeStorageSync("address")
			
		},
		onShow() {
			console.log("---选择的地址 ---",uni.getStorageSync("address"))
			this.addressList = uni.getStorageSync("address")
			if(this.addressList != '' && this.addressList != null){
				this.addressName = this.addressList.deviceLocation
				this.lng = this.addressList.longitude
				this.lat = this.addressList.latitude
				console.log("----设备地址----",this.addressList.deviceLocation)
				// console.log("----缓存-----",this.addressList);
			}
			
			// 
			
		},
		methods: {
			load() {
				this.$refs.uReadMore.init();
			},
			sweep(){  // 定位按钮 
				uni.navigateTo({
					url:"/pages/clientVue/gdMap?lng="+this.lng+"&lat="+this.lat
				})

			},
			locationBlur(){
				console.log("******   失去焦点触发 *******")
			},
			// 业务员 
			Merchconfirm(e){
				this.showMerch = false
				this.salespersonname = e.value[0]
			},
			Merchchange(e){
				// this.showMerch = false
			},
			// 技术负责人
			TDconfirm(e){
				this.showTD = false
				this.productionleader = e.value[0]
			},
			TDchange(e){
				// this.showTD = false
			},
			// 产品 名称
			productConfirm(e){
				this.showProduct = false
				this.devicetype = e.value[0]
			},
			productCancle(){
				console.log("产品  取消-------")
				this.showProduct = false
				},
			productClose(){
				console.log("关闭--------------")
				this.showProduct = false
				},
			productChange(e){
				
				},
			//  生产负责人选择 
			peopleConfirm(e){
				this.showPeople = false
				this.productiongroup= e.value[0]
				// console.log(this.productiongroup,"=========")
			},
			peopleChange(e){
				console.log(e,"---------")
			},
			// peopleCancle(){
			// 	console.log('点击了取消 ---------')
			// 	this.showPeople = false
			// },
			// peopleClose(){
			// 	this.showPeople = false
			// },
			//  时间选择   
			close() {
				this.show = false
			},
			cancel() {
				console.log("取消了-------")
				this.show = false
			},
			confirm(e) {
				this.show = false
				const timeFormat = uni.$u.timeFormat
				console.log(timeFormat(e.value, 'yyyy-mm-dd hh:MM'),"点击确定时-------------- ")
				this.deliverytime = timeFormat(e.value, 'yyyy-mm-dd hh:MM')
			},
			change(e) {
				console.log('change', e)
			},
			deviceEnterUpload(){
				if(this.devicetype == '' || this.devicemodel == '' || this.deliverytime =='' || this.productiongroup == '' || this.salespersonname==''||
				this.productionleader=='' || this.customername =='' || this.contacts == '' || this.customerphone== '' ||
				this.companyposition=='' || this.projectname == '' || this.productacode == '' || this.addressName == ''){
					
					uni.showToast({
						title: '请确保数据不为空',
						duration:2000,
						icon: 'none'
					})
				}else{
					uni.request({
				 	url: 'https://www.smacaftersales.com:443/information/information/updataDeviceInfo',
				 	method: 'POST',
					data:{
						devicetype: this.devicetype,  
						serialnumber: this.serialnumber,
						devicemodel: this.devicemodel, 
						deliverytime: this.deliverytime,  
						productiongroup: this.productiongroup,
						salespersonName: this.salespersonname,   
						productionleader: this.productionleader,   
						// salespersonPhone: this.salespersonphone, 
						customername: this.customername,  
						contacts: this.contacts,    
						customerphone: this.customerphone,  
						companyPosition: this.companyposition,  
						projectName: this.projectname,      
						// location: this.location,    
						productAcode: this.productacode,
						// position: this.position
						location: this.addressName,
						lng: this.lng,
						lat: this.lat
						
					},
				 	header: {
				 		"Content-Type": "application/json" ,//请求头信息
						
				 	},
					success: (res) => {
						console.log("----  上报 ------",res)
						if(res.data.code == 200){
							uni.showToast({
								title: "设备绑定成功",
								duration: 2000,
								icon: 'success'
							})
							this.timer = setTimeout( () => {
								uni.switchTab({
								url: '/pages/adminVue/my'
								})			
							}, 2100)
							
						}
					}
				 })
				}	
			}
		}
	}
</script>

<style lang="scss">
	
	
	
	.sweep-bt{
		background-color: #e3e3e3;
		border-radius: 15px;
		height: 35px;
		display: flex; 
		justify-content: center; //水平居中
		align-items: center;
	}
	.sweep-bt:after{
		border: none;
	}
	 
	.upload{
		width: 200px;
		height: 50px;
		border-radius: 25px;
		border: 3rpx solid #6699FF;
		margin-top: 20px;
	}
	.uni-input{
		height: 35px;
		border-radius: 5px;
		background: #f5f5f5;
	}
	.title{
		width: 80px;
		height: 35px;
		font-size: 16px;
	}
.user-input{
	width: 390px;
	margin: 8px 10px;
	display: flex;
	.input{
		width: 260px;
		margin-left: 10px;
	}
}

.fenjie{
	width: 390px;
	height: 1px;
	background: #ddd;
	margin: 0 auto;
}

.up-button{
	width: 160px;
	height:40px;
	background: #488ac7;
	border-radius: 4px;
	font-size: 16px;
	line-height: 40px;
	color: white;
	margin-top: 30px;
}

.notes{
	width: 335px;
	margin: 0px auto 15px;
	font-size: 14px;
	
	span{
		color: red;
		margin-right: 4px;
	}
	p{
		color: #999;
	}
}

//   设备位置 折叠面板

    .u-page {
        padding: 0;

        &__item {
    
            &__title {
                 color: $u-tips-color;
                 background-color: $u-bg-color;
                 padding: 15px;
                 font-size: 15px;
        
                &__slot-title {
                     color: $u-primary;
                     font-size: 14px;
                 }
            }
        }
    }

    .u-collapse-content {
        color: $u-tips-color;
        font-size: 14px;
    }

</style>
